import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Select, Descriptions } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconChainStroked } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";

const SettingPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { routers } = useModel("routers");

    const state = useReactive({
        loading: false,
        menus: [],
        selectItem: {},
        selectMenu: null,
    });

    useEffect(() => {
        if (routers["setting"]) {
            let subMenus = routers["setting"].subMenus;
            let menus = Object.keys(subMenus).map((key) => {
                const { title } = subMenus[key];
                return { key, title };
            });
            state.menus = menus;
            let selectMenu = menus.find((item) => item.key === state.selectMenu?.key);
            !selectMenu && menus.length > 0 && (selectMenu = menus[0]);
            state.selectMenu = selectMenu;
            console.log(selectMenu);
        }
    }, [routers]);

    useEffect(() => {
        state.selectMenu?.key && history.replace("/setting/" + state.selectMenu.key);
    }, [state.selectMenu]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 15 }}>绑定商户小程序</span>}
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                size="default"
                bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                headerExtraContent={
                    <ButtonGroup>
                        {state.selectMenu?.key === "merchant" && <Button icon={<IconChainStroked />}></Button>}
                        {state.selectMenu?.key === "miniapp" && <Button icon={<IconChainStroked />}></Button>}
                        <Button icon={<IconRefresh />}></Button>
                    </ButtonGroup>
                }
            >
                <div style={{ display: "flex" }}>
                    <div style={{ padding: 1, width: 200, borderRight: "1px solid #eee", height: cardBodyHeight, overflow: "auto" }}>
                        <List
                            loading={state.loading}
                            dataSource={state.menus}
                            renderItem={(item, index) => {
                                return (
                                    <List.Item
                                        className={`list-item ${state.selectMenu?.key === item?.key ? "list-item-selected" : ""}`}
                                        main={<div>{item.title}</div>}
                                        onClick={() => (state.selectMenu = item)}
                                    />
                                );
                            }}
                        />
                    </div>
                    <div style={{ flex: 1, height: cardBodyHeight, overflow: "auto" }}>
                        <Outlet context={{ selectItem: state.selectItem, cardBodyHeight }} />
                    </div>
                </div>
            </SemiCard>
        </div>
    );
};

export default SettingPage;
